<script setup>
import sideBar from "./components/sideBar.vue";
import {clothesListApi,clothesBgApi} from '@/apis/clothes.js'
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref } from "vue";
const imageUrl = ref('')
const bgUrl = ref('')
const changePic = () => {
  uni.chooseImage({
        count: 1, // 默认9，设置图片选择的最大数量
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], // 从相册选择
        success: async(res) => {
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          const uploadRes = await uni.uploadFile({
              url: `http://localhost:6060/clothes/change`,
              filePath: res.tempFilePaths[0],
              name: 'file',
              header: {
                  'token': `${uni.getStorageSync('token')}`
              }
          });
          if (uploadRes.statusCode === 200) {
             imageUrl.value = JSON.parse(uploadRes.data).imgUrl
          }
        },
        fail: (err) => {
          // 用户取消选择或发生错误时执行的回调函数
          uni.showToast({
            title: '选择图片失败',
            icon: 'none'
          });
        }
      });
};

const leftList = ref()
const rightList = ref()
const dataInit = async()=>{
  const listRes = await clothesListApi()
  leftList.value = listRes.data.slice(0, 3)
  rightList.value = listRes.data.slice(3, 6)
  const bgRes = await clothesBgApi()
  imageUrl.value = bgRes.imgUrl
  bgUrl.value = bgRes.bgUrl

}

// 子传父的触发函数
const base64 = (base64) => {
  imageUrl.value = base64
}

onLoad(() => {
  dataInit()
})

onShow(()=>{
  dataInit()
})

</script>

<template>
  <div class="body">
    <!-- 左边栏 -->
    <div class="left-bar">
      <!-- 单个边栏 -->
      <div class="sideBar" v-for="(item,index) in leftList" :key="index">
        <text class="title">{{ item.clothesType }}</text>
        <div class="left-sideBar">
          <sideBar :list="item.chooseImags" :bgUrl="bgUrl" @base64="base64"></sideBar>
        </div>
      </div>
    </div>
    <!-- 中间主体 -->
    <div class="container">
      <!-- 主体的头部 -->
      <div class="con-header"></div>
      <!-- 人物 -->
      <div class="con-img">
        <img :src="imageUrl" class="container-img" @click="changePic"></div>
      <!-- 主体底部 -->
      <div class="con-footer"></div>
    </div>
    <!-- 右边栏 -->
    <div class="right-bar">
      <!-- 单个边栏 -->
      <div class="sideBar" v-for="(item,index) in rightList" :key="index">
        <text class="title">{{ item.clothesType }}</text>
        <div class="right-sideBar">
          <sideBar :list="item.chooseImags" :bgUrl="bgUrl" @base64="base64"></sideBar>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.body {
  display: flex;
  justify-content: space-between;
  background-color: #f5f5f5;
}
.container {
  width: 70%;
  margin: 0rpx 5rpx 0rpx 5rpx;
  $uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
}

.right-bar,
.left-bar {
  width: 15%;
}

.right-sideBar,
.left-sideBar {
  height: 200px;
  overflow: auto;
}
.sideBar {
  color: black;
  text-align: center;
  font-weight: bolder;
}
.title {
  display: block;
  width: 100%;
  background: #ffffff;
  $uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
}
.container-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
.con-img{
  width: 100%;
  height: 99%;
  border: 0rpx solid #ffffff;
  border-radius: 5rpx;
}
.con-footer,.con-header{
  height: 0.5%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
}
</style>
